<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <title>Pet Clinic - Owner Details</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="shortcut icon" href="/favicon.ico">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
  </head>
  <body>
    <!--[if lt IE 10]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <nav class="navbar navbar-default navbar-static-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <a class="navbar-brand" href="/">
            <img alt="Pet Clinic Brand" height="27" width="auto" src="images/logo.png">
          </a>
          <button class="navbar-toggle navbar-toggle-left collapsed" type="button" data-toggle="collapse" data-target="#nav-menu">
            <span class="sr-only">Toggle navigation</span>
            <span class="glyphicon glyphicon-triangle-bottom"></span>
          </button>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div id="nav-menu" class="navbar-collapse navbar-left collapse">
          <ul class="nav navbar-nav navbar-menu">
            <li><a href="dashboard.html">Dashboard</a></li>
            <li class="active"><a href="owners.html">Owners</a></li>
            <li><a href="pets.html">Pets</a></li>
            <li><a href="vets.html">Vets</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
        <ul class="nav navbar-profile">
          <li class="hidden">
            <button class="btn btn-default btn-primary btn-new navbar-btn" data-toggle="dropdown">Create New</button>
          </li>
          <li><a href="#" data-toggle="modal" data-target="#searchModal"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a></li>
          <li><a href="#" data-toggle="modal" data-target="#addOwnerModal"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle img-profile" data-toggle="dropdown" role="button" aria-expanded="false">
              <img class="img-circle img-circle-small" src="images/avatar.jpg" width="30" height="30">
            </a>
            <ul class="dropdown-menu navbar-dropdown-menu">
              <li><a href="#">View Profile</a></li>
              <li><a href="#">Settings</a></li>
              <li><a href="#">Sign Out</a></li>
              <li class="divider"></li>
              <li><a href="#">Help</a></li>
            </ul>
          </li>
        </ul>
        </div>
      </div><!-- /.container-fluid -->
    </nav>

    <!-- Owner Brief Info -->
    <header class="sections sections-narrow sections-light">
      <div class="container">
        <div class="media media-welcome">
          <div class="media-left">
            <img src="images/owner-default.png" class="img-circle media-object" width="90" height="90">
          </div>
          <div class="media-body">
            <div class="pull-right stats stats-lg">
              <ul>
                <li>4<span>Pets</span></li>
                <li>10<span>Visits</span></li>
              </ul>
            </div>
            <h1 class="h3">Maria Escobito</h1>
            <p>Accountant, Ledger Associates</p>
            <p><span class="glyphicon glyphicon-map-marker" aria-hidden="true"></span> Accountant, Ledger Associates</p>
            <div class="btn-group">
              <a href="#" class="btn btn-link"><span class="glyphicon glyphicon-phone-alt" aria-hidden="true"></span> Call</a>
              <a href="#" class="btn btn-link"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span> Message</a>
            </div>
          </div>
        </div>
      </div>
    </header>

    <!-- Owners -->
    <section id="ownersInfo" class="sections sections-no-padding sections-darker">
      <div class="container">
        <div class="row">
          <div class="col-md-9 col-border-right">
            <div class="section-inner-padding">
              <a href="#" class="btn btn-primary pull-right" data-toggle="modal" data-target="#editOwnerModal"><span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Edit Owner</a>
              <h2 class="h3 sub-header">Owner Information</h2>
              <form class="form-inline form-inline-display">
                <div class="form-group">
                  <p>First Name</p>
                  <p class="h5">Maria</p>
                </div>
                <div class="form-group">
                  <p>Last Name</p>
                  <p class="h5">Rodriguez</p>
                </div>
                <div class="form-group">
                  <p>Occupation</p>
                  <p class="h5">Accountant</p>
                </div>
                <div class="form-group">
                  <p>Company</p>
                  <p class="h5">Ledger Associates</p>
                </div>
                <div class="form-group">
                  <p>Birthday</p>
                  <p class="h5">04 Feb 1988</p>
                </div>
                <div class="form-group">
                  <p>Address</p>
                  <p class="h5">345 Maple St.</p>
                </div>
                <div class="form-group">
                  <p>City</p>
                  <p class="h5">Madison</p>
                </div>
                <div class="form-group">
                  <p>Contact Number</p>
                  <p class="h5">6085557683</p>
                </div>
                <div class="form-group">
                  <p>Email</p>
                  <p class="h5">maria.escobito@gmail.com</p>
                </div>
              </form>
            </div>
          </div>
          <div class="col-md-3">
            <div class="section-inner-padding">
              <h2 class="h3 sub-header">Owner Activities</h2>
              <!-- List group -->
              <ul class="list-group">
                <li class="list-group-item">
                  <span class="glyphicon glyphicon-retweet" aria-hidden="true"></span> 
                  <strong>Next Appointment:</strong> None</li>
                <li class="list-group-item">
                  <span class="glyphicon glyphicon-road" aria-hidden="true"></span> 
                  <strong>Last Visited:</strong> 02 Feb 2015</li>
                <li class="list-group-item">
                  <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span> 
                  <strong>Due Date:</strong> 14 Mar 2015</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Pets -->
    <section id="pets" class="sections sections-narrow">
      <div class="container">
        <div class="action-wrappers pull-right">
          <a class="btn btn-primary pull-right action-item" data-toggle="modal" data-target="#addPetModal">
            <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add New Pet
          </a>
          <div class="pull-right action-item">
            View as 
            <div class="btn-group">
              <a class="btn btn-default">
                <span class="glyphicon glyphicon-th" aria-hidden="true"></span>
              </a>
              <a class="btn btn-default">
                <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
              </a>
            </div>
          </div>
        </div>
        <h2 class="sub-header">Owner's Pets</h2>
        <div class="row thumbnail-wrapper">
          <div class="col-md-3">
            <div class="thumbnail">
              <img src="images/pet-default.png" class="img-circle" alt="Generic placeholder image">
              <div class="caption">
                <h3 class="caption-heading">Basil</h3>
                <p class="caption-meta">08 August 2012</p>
                <p class="caption-meta"><span class="caption-label">Hamster</span></p>
              </div>
              <div class="action-bar">
                <a class="btn btn-default" data-toggle="modal" data-target="#editPetModal">
                  <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> Edit Pet
                </a>
                <a class="btn btn-default" data-toggle="modal" data-target="#addPetVisitModal">
                  <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add Visit
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Pets -->
    <section id="pets" class="sections sections-bottom-nav sections-darker">
      <div class="container">
        <ul class="pager pager-link pull-left">
          <li><a href="owners.html"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span> Back to Owners List</a></li>
        </ul>
        <ul class="pager pager-link pull-right">
          <li><a href="owner_details.html"><span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> Carlos Estaban</a></li>
          <li><a href="owner_details.html">Jean Coleman <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span></a></li>
        </ul>
      </div>
    </section>

    <!-- Footer -->
    <footer class="footer">
      <div class="container">
        <p class="pull-right">Tell your friends: <a href="#">Facebook</a>, <a href="#">Twitter</a>, <a href="#">Google+</a></p>
        <p>© 2015 Pet Clinic, A Spring Framework Demonstration</p>
      </div>
    </footer>

    <!-- Add Owner Modal -->
    <div class="modal modal-owner fade" id="addOwnerModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <div class="container">
              <div class="row">
                <div class="col-md-8 col-md-offset-2">
                  <h1 class="sub-header">Add An Owner</h1>
                  <em class="text-muted">Fill up pet owners basic information and contact details</em>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-body">
            <div class="container">
              <div class="row">
                <div class="col-md-4 col-md-offset-2">
                  <div class="form-group">
                    <label for="firstName">First Name</label>
                    <input type="text" class="form-control" id="firstName">
                  </div>
                  <div class="form-group">
                    <label for="lastName">Last Name</label>
                    <input type="text" class="form-control" id="lastName">
                  </div>
                  <div class="form-group">
                    <label for="profileImg">Profile Photo</label>
                    <input type="file" class="form-control-file" id="profileImg">
                  </div>
                  <div class="form-group">
                    <label for="occupation">Occupation</label>
                    <input type="text" class="form-control" id="occupation">
                  </div>
                   <div class="form-group">
                    <label for="company">Company</label>
                    <input type="text" class="form-control" id="company">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="birthDate">Birth Date</label>
                    <input type="text" class="form-control" id="birthDate">
                  </div>
                  <div class="form-group">
                    <label for="address">Address</label>
                    <input type="text" class="form-control" id="address">
                  </div>
                  <div class="form-group">
                    <label for="city">City</label>
                    <input type="text" class="form-control" id="city">
                  </div>
                  <div class="form-group">
                    <label for="contactNumber">Contact Number</label>
                    <input type="text" class="form-control" id="contactNumber">
                  </div>
                  <div class="form-group">
                    <label for="email">Email</label>
                    <input type="text" class="form-control" id="email">
                  </div>
                </div>
                <div class="col-md-8 col-md-offset-2">
                  <div class="form-group form-group-action">
                    <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#addOwnerSuccessModal" data-dismiss="modal" aria-label="Close">Add Owner</button>
                    <button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Add Owner Success Modal -->
    <div class="modal modal-owner fade" id="addOwnerSuccessModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <div class="container">
              <div class="row">
                <div class="col-md-8 col-md-offset-2">
                  <h1 class="sub-header">Owner added successfully!</h1>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-body">
            <div class="container">
              <div class="row">
                <div class="col-md-8 col-md-offset-2">
                  <div class="alert alert-success" role="alert">
                    Well done! You've successfully added an a new owner.
                  </div>
                  <div class="form-group form-group-action">
                    <a href="owner_details.html" class="btn btn-primary">View owner's details</a>
                    <button class="btn btn-link" data-dismiss="modal" aria-label="Close">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Edit Owner Modal -->
    <div class="modal modal-owner fade" id="editOwnerModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <div class="container">
              <div class="row">
                <div class="col-md-8 col-md-offset-2">
                  <h1 class="sub-header">Edit Owner</h1>
                  <em class="text-muted">Fill up pet owners basic information and contact details</em>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-body">
            <div class="container">
              <div class="row">
                <div class="col-md-4 col-md-offset-2">
                  <div class="form-group">
                    <label for="firstName">First Name</label>
                    <input type="text" class="form-control" id="firstName" value="Maria">
                  </div>
                  <div class="form-group">
                    <label for="lastName">Last Name</label>
                    <input type="text" class="form-control" id="lastName" value="Rodriguez">
                  </div>
                  <div class="form-group">
                    <label for="profileImg">Profile Photo</label>
                    <input type="file" class="form-control-file" id="profileImg">
                  </div>
                  <div class="form-group">
                    <label for="occupation">Occupation</label>
                    <input type="text" class="form-control" id="occupation" value="Accountant">
                  </div>
                   <div class="form-group">
                    <label for="company">Company</label>
                    <input type="text" class="form-control" id="company" value="Ledger Associates">
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group">
                    <label for="birthDate">Birth Date</label>
                    <input type="text" class="form-control" id="birthDate" value="04 Feb 1988">
                  </div>
                  <div class="form-group">
                    <label for="address">Address</label>
                    <input type="text" class="form-control" id="address" value="345 Maple St.">
                  </div>
                  <div class="form-group">
                    <label for="city">City</label>
                    <input type="text" class="form-control" id="city" value="Madison">
                  </div>
                  <div class="form-group">
                    <label for="contactNumber">Contact Number</label>
                    <input type="text" class="form-control" id="contactNumber" value="6085557683">
                  </div>
                  <div class="form-group">
                    <label for="email">Email</label>
                    <input type="text" class="form-control" id="email" value="maria.escobito@gmail.com">
                  </div>
                </div>
                <div class="col-md-8 col-md-offset-2">
                  <div class="form-group form-group-action">
                    <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#editOwnerSuccessModal" data-dismiss="modal" aria-label="Close">Update Owner</button>
                    <button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Edit Owner Success Modal -->
    <div class="modal modal-owner fade" id="editOwnerSuccessModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <div class="container">
              <div class="row">
                <div class="col-md-8 col-md-offset-2">
                  <h1 class="sub-header">Owner updated successfully!</h1>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-body">
            <div class="container">
              <div class="row">
                <div class="col-md-8 col-md-offset-2">
                  <div class="alert alert-success" role="alert">
                    Well done! You've successfully updated an owner.
                  </div>
                  <div class="form-group form-group-action">
                    <a href="owner_details.html" class="btn btn-primary">View owner's details</a>
                    <button class="btn btn-link" data-dismiss="modal" aria-label="Close">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Add New Pet Modal -->
    <div class="modal modal-owner fade" id="addPetModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <div class="container">
              <div class="row">
                <div class="col-md-4 col-md-offset-4">
                  <h1 class="sub-header">Add a New Pet</h1>
                  <em class="text-muted">Fill up pet basic information</em>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-body">
            <div class="container">
              <div class="row">
                <div class="col-md-4 col-md-offset-4">
                  <div class="form-group">
                    <label for="firstName">Owner</label>
                    <input type="text" class="form-control" id="firstName" value="Maria Rodriguez" readonly>
                  </div>
                  <div class="form-group">
                    <label for="petName">Pet Name</label>
                    <input type="text" class="form-control" id="petName">
                  </div>
                  <div class="form-group">
                    <label for="petProfileImg">Pet Photo</label>
                    <input type="file" class="form-control-file" id="petProfileImg">
                  </div>
                  <div class="form-group">
                    <label for="birthDate">Birth Date</label>
                    <input type="text" class="form-control" id="birthDate">
                  </div>
                   <div class="form-group">
                    <label for="type">Type</label>
                    <select class="form-control" id="type">
                      <option value="bird">bird</option>
                      <option value="cat">cat</option>
                      <option value="dog">dog</option>
                      <option value="hamster">hamster</option>
                      <option value="lizard">lizard</option>
                      <option value="snake">snake</option>
                    </select>
                  </div>
                  <div class="form-group form-group-action">
                    <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#addPetSuccessModal" data-dismiss="modal" aria-label="Close">Add Pet</button>
                    <button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Add New Pet Success Modal -->
    <div class="modal modal-owner fade" id="addPetSuccessModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <div class="container">
              <div class="row">
                <div class="col-md-8 col-md-offset-2">
                  <h1 class="sub-header">Pet added successfully!</h1>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-body">
            <div class="container">
              <div class="row">
                <div class="col-md-8 col-md-offset-2">
                  <div class="alert alert-success" role="alert">
                    Well done! You've successfully added a pet.
                  </div>
                  <div class="form-group form-group-action">
                    <button class="btn btn-primary" data-toggle="modal" data-target="#addPetVisitModal" data-dismiss="modal" aria-label="Close">Add New Visit</button>
                    <button class="btn btn-link" data-dismiss="modal" aria-label="Close">Not Now</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Edit Pet Modal -->
    <div class="modal modal-owner fade" id="editPetModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <div class="container">
              <div class="row">
                <div class="col-md-4 col-md-offset-4">
                  <h1 class="sub-header">Edit Pet</h1>
                  <em class="text-muted">Fill up pet basic information</em>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-body">
            <div class="container">
              <div class="row">
                <div class="col-md-4 col-md-offset-4">
                  <div class="form-group">
                    <label for="firstName">Owner</label>
                    <input type="text" class="form-control" id="firstName" value="Maria Rodriguez" readonly>
                  </div>
                  <div class="form-group">
                    <label for="petName">Pet Name</label>
                    <input type="text" class="form-control" id="petName" value="Basil">
                  </div>
                  <div class="form-group">
                    <label for="petProfileImg">Pet Photo</label>
                    <input type="file" class="form-control-file" id="petProfileImg">
                  </div>
                  <div class="form-group">
                    <label for="birthDate">Birth Date</label>
                    <input type="text" class="form-control" id="birthDate" value="08 August 2012">
                  </div>
                   <div class="form-group">
                    <label for="type">Type</label>
                    <select class="form-control" id="type">
                      <option value="bird">bird</option>
                      <option value="cat">cat</option>
                      <option value="dog">dog</option>
                      <option value="hamster" selected>hamster</option>
                      <option value="lizard">lizard</option>
                      <option value="snake">snake</option>
                    </select>
                  </div>
                  <div class="form-group form-group-action">
                    <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#editPetSuccessModal" data-dismiss="modal" aria-label="Close">Update Pet</button>
                    <button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Edit Pet Success Modal -->
    <div class="modal modal-owner fade" id="editPetSuccessModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <div class="container">
              <div class="row">
                <div class="col-md-8 col-md-offset-2">
                  <h1 class="sub-header">Pet update successfully!</h1>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-body">
            <div class="container">
              <div class="row">
                <div class="col-md-8 col-md-offset-2">
                  <div class="alert alert-success" role="alert">
                    Well done! You've successfully update a pet.
                  </div>
                  <div class="form-group form-group-action">
                    <a href="owner_details.html" class="btn btn-primary">View owner's pets</a>
                    <button class="btn btn-link" data-dismiss="modal" aria-label="Close">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Add Pet Visit Modal -->
    <div class="modal modal-owner fade" id="addPetVisitModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <div class="container">
              <div class="row">
                <div class="col-md-4 col-md-offset-4">
                  <h1 class="sub-header">New Visit</h1>
                  <em class="text-muted">Fill up pet visit basic information</em>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-body">
            <div class="container">
              <div class="row">
                <div class="col-md-4 col-md-offset-4">
                  <div class="form-group">
                    <label for="petName">Pet Name</label>
                    <input type="text" class="form-control" id="petName" value="Basil" readonly>
                  </div>
                  <div class="form-group">
                    <label for="visitDate">Visit Date</label>
                    <input type="text" class="form-control" id="visitDate">
                  </div>
                  <div class="form-group">
                    <label for="visitDesc">Description</label>
                    <textarea class="form-control" rows="3" id="visitDesc"></textarea>
                  </div> 
                  <div class="form-group form-group-action">
                    <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#addPetVisitSuccessModal" data-dismiss="modal" aria-label="Close">Add Visit</button>
                    <button class="btn btn-link" class="close" data-dismiss="modal" aria-label="Close">Cancel</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Edit Pet Success Modal -->
    <div class="modal modal-owner fade" id="addPetVisitSuccessModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <div class="container">
              <div class="row">
                <div class="col-md-8 col-md-offset-2">
                  <h1 class="sub-header">Pet visit added successfully!</h1>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-body">
            <div class="container">
              <div class="row">
                <div class="col-md-8 col-md-offset-2">
                  <div class="alert alert-success" role="alert">
                    Well done! You've successfully added a pet visit.
                  </div>
                  <div class="form-group form-group-action">
                    <button class="btn btn-primary" data-dismiss="modal" aria-label="Close">Close</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- Search Result Modal -->
    <div class="modal modal-search fade" id="searchModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <div class="container">
            <h1 class="sub-header">Search PetClinic</h1>
            <em class="text-muted">Start typing to search for owner, pets, or veterinarians...</em>
          </div>
        </div>
        <div class="modal-body">
          <div class="container">
            <form>
              <div class="form-group">
                <input type="search" class="form-control">
                <button class="btn btn-default" type="button">
                  <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                </button>
              </div>
            </form>
            
            <!-- ### TODO:
            Note by AA: I'm just showing the results for reference purpose
            This should be hidden by default and only be shown if there's result -->
            <div class="modal-seach-result">
              <h2 class="form-group-heading">Result of your search query</h2>
              <div class="row thumbnail-wrapper">
                <div class="col-md-3" ng-repeat="x in [1,2,3,4,5,6,7]">
                  <div class="thumbnail">
                    <a href="#"><img src="images/owner-default.png" class="img-circle" alt="Generic placeholder image"></a>
                    <div class="caption">
                      <h3 class="caption-heading"><a href="#">Eduardo Rodriguez</a></h3>
                      <p class="caption-meta">2693 Commerce St., McFarland</p>
                      <p class="caption-meta"><span class="glyphicon glyphicon-phone-alt"></span> +6085558763</p>
                    </div>
                  </div>
                </div>
              </div>
              <!-- /row -->
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/affix.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/alert.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/button.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/carousel.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/collapse.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/dropdown.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tab.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/transition.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/scrollspy.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/modal.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tooltip.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/popover.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js({app,.tmp}) scripts/main.js -->
    <script src="scripts/main.js"></script>
    <!-- endbuild -->
</body>
</html>
